import React, { Component, Fragment, useState } from "react";
import { Layout, Input } from 'antd';
import Head from '../../common/header';
import { connect, useSelector } from "react-redux";
import './index.css';
const { Content } = Layout;
const { Search } = Input;

const User = () => {
    const roomList = useSelector((state) => {
        return state.app.roomList;
    })
    return (
        <Fragment>
            <Head />
            <Content style={{ padding: '10px 50px' }}>
                <div className="site-layout-content" style={{ display: 'flex', flexDirection: 'column' }}>
                    <div className="user-search">
                        <Search placeholder="输入客户昵称搜索" enterButton />
                    </div>
                    {roomList.map((item) => {
                        if (item.used) {
                            return (
                                <div className="user-item-container" key={item.id}>
                                    <span className="user-item-room">{item.number}</span>
                                    <span className="user-item-room">住户:{item.name}</span>
                                    <span className="user-item-room">住户电话:{item.phone}</span>
                                    <span className="user-item-room">剩余时长:{item.time}</span>
                                </div>
                            )
                        }
                    })}
                </div>
            </Content>
        </Fragment>
    )
}

// class User extends Component{
//     constructor(props){
//         super(props);
//     }
//     render(){
//         const { roomList } = this.props;
//         return(
//             <Fragment>
//                 <Head/>
//                 <Content style={{ padding: '10px 50px' }}>
//                     <div className="site-layout-content" style={{display:'flex',flexDirection:'column'}}>
//                         <div className="user-search">
//                             <Search placeholder="输入客户昵称搜索" enterButton/>
//                         </div>
//                         {roomList.map((item)=>{
//                             if(item.used){
//                                 return(
//                                     <div className="user-item-container" key={item.id}>
//                                         <span className="user-item-room">{item.number}</span>
//                                         <span className="user-item-room">住户:{item.name}</span>
//                                         <span className="user-item-room">住户电话:{item.phone}</span>
//                                         <span className="user-item-room">剩余时长:{item.time}</span>
//                                     </div>
//                                 )
//                             }
//                         })}
//                     </div>
//                 </Content> 
//             </Fragment>
//         )
//     }
// }
const mapStateToProps = (state) => ({
    roomList: state.app.roomList
})
export default connect(mapStateToProps, null)(User);